<!-- 营销活动-->
<template>
  <div
    :style="{
      'background-color': config.ConfigData.bgcolor,
      margin: '0 ' + config.ConfigData.margin + 'px',
      'border-radius': config.ConfigData.parentradius + 'px'
    }"
  >
    <div
      class="background-div"
      v-if="
        config.ConfigData.type === 1 ||
          config.ConfigData.type === 2 ||
          config.ConfigData.type === 3 ||
          config.ConfigData.type === 9
      "
      :style="{ padding: '0 ' + config.ConfigData.padding + 'px' }"
    >
      <div
        class="img-view1"
        :style="{ padding: '0 ' + (config.ConfigData.type === 1 ? '' : 0) }"
      >
        <img
          v-for="(item, index) in config.ConfigData.activitylist"
          :key="index"
          :style="{
            'border-radius': config.ConfigData.radius + 'px',
            'margin-right':
              index === config.ConfigData.activitylist.length - 1
                ? 0
                : config.ConfigData.itemmargin + 'px',
            width: config.ConfigData.itemwidth + '%'
          }"
          lazy-load
          mode="widthFix"
          :src="item.image | getgalleryImg('w750')"
          :class="[
            'imagesize2',
            { type1view: config.ConfigData.type === 1 },
            { type1view3: config.ConfigData.type === 3 },
            { type1view9: config.ConfigData.type === 9 }
          ]"
        />
        <!-- <img src="{{config.ConfigData.activitylist[0].img}}"   class="imagesize1 type1view" /> -->
      </div>
    </div>
    <div
      class="type4view"
      v-if="config.ConfigData.type === 4"
      :style="{ padding: '0 ' + config.ConfigData.padding + 'px' }"
    >
      <div class="type4view_2_img">
        <img
          :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
          lazy-load
          mode="aspectFill"
          :src="config.ConfigData.activitylist[0].img | getgalleryImg('w750')"
        />
      </div>
      <div class="type4view_2">
        <div
          v-for="(item, index) in config.ConfigData.activitylist"
          :key="index"
        >
          <div v-if="index > 0" class="type4view_3_img">
            <img
              :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
              lazy-load
              mode="aspectFill"
              :src="item.image | getgalleryImg('w750')"
            />
          </div>
        </div>
      </div>
    </div>

    <div
      class="background-div"
      v-if="config.ConfigData.type === 5 || config.ConfigData.type === 6"
      :style="{ padding: '0 ' + config.ConfigData.padding + 'px' }"
    >
      <div>
        <div class="img-view1">
          <img
            :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
            lazy-load
            mode="widthFix"
            :src="config.ConfigData.activitylist[0].img | getgalleryImg('w750')"
            class="imagesize1"
          />
        </div>
        <div class="img-view2">
          <div
            v-for="(item, index) in config.ConfigData.activitylist"
            :key="index"
          >
            <img
              :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
              lazy-load
              mode="widthFix"
              v-if="index > 0"
              :src="item.image | getgalleryImg('w450')"
              :class="[
                'imagesize2',
                { imagesize2_type5: config.ConfigData.type === 5 },
                { imagesize2_type6: config.ConfigData.type === 6 }
              ]"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="background-div"
      v-if="config.ConfigData.type === 7"
      :style="{ padding: '0 ' + config.ConfigData.padding + 'px' }"
    >
      <div class="img-view2 type7view">
        <div
          v-for="(item, index) in config.ConfigData.activitylist"
          :key="index"
        >
          <img
            :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
            lazy-load
            mode="widthFix"
            :src="item.image | getgalleryImg('w450')"
            class="imagesize2 type7img"
          />
        </div>
      </div>
    </div>
    <div
      class=" type4view"
      v-if="config.ConfigData.type === 8"
      :style="{ padding: '0 ' + config.ConfigData.padding + 'px' }"
    >
      <div class="type4view_2_img">
        <img
          :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
          lazy-load
          mode="aspectFill"
          :src="config.ConfigData.activitylist[0].image | getgalleryImg('w750')"
        />
      </div>
      <div class="type4view_2">
        <div class="type4view_3_img">
          <img
            :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
            lazy-load
            mode="aspectFill"
            :src="
              config.ConfigData.activitylist[1].image | getgalleryImg('w750')
            "
          />
        </div>
        <div class="type4view_3_img type8view">
          <div
            v-for="(item, index) in config.ConfigData.activitylist"
            :key="index"
          >
            <div v-if="index > 1" class="type8_1">
              <img
                :style="{ 'border-radius': config.ConfigData.radius + 'px' }"
                lazy-load
                mode="aspectFill"
                :src="item.image | getgalleryImg('w750')"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { isReallyNull } from "@/utils/utils";
export default {
  name: "MaketingActivityCopt",
  props: {
    config: Object
  },
  data() {
    return {};
  },
  methods: {
    ngt(item) {
      if (isReallyNull(item.linktype) || isReallyNull(item.bizsysnos)) {
        return;
      }
      this.$emit("comsngt", item);
    }
  },
  mounted() {}
};
</script>

<style lang="scss">
.background-div {
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
}
.titleText-div {
  padding-top: 35px;
  padding-left: 12px;
  padding-right: 24.5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.titile-text {
  font-size: 17px;
  color: #222222;
  font-weight: 600;
}
.mini-title-text {
  font-size: 12px;
  color: #999999;
  padding-left: 14px;
  margin-top: 8px;
}
.img-view1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.imagesize1 {
  height: 130px;
}

.img-view2 {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.type7view {
  flex-wrap: wrap;
}
.imagesize2 {
  width: 180px;
  /* height: 360px; */
}
.type7img {
  margin-bottom: 5px;
  width: 49%;
}
.type1view {
  width: 100%;
  height: 180px;
}
.type1view3 {
  width: 218px;
}
.type1view9 {
  width: 92px;
}
.imagesize2_type5 {
  width: 48%;
}
.imagesize2_type6 {
  width: 31.2%;
  /* width: 237px; */
}
.type4view {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 5px;
}
img {
  width: 100%;
  height: 100%;
}
.type4view_2 {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.type4view_3_img {
  height: 103px;
}
.type8view {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.type8_1 {
  width: 48%;
}
.type4view_2_img {
  display: flex;
  flex: 1;
  overflow: hidden;
  width: 180px;
  height: 210px;
  margin-right: 5px;
}
</style>
